{% extends 'admin/common/base.html' %}
{% block css %}
{{super()}}
<link href="{{url_for('admin.static',filename='ajax/libs/jasny/jasny-bootstrap.min.css')}}?v=3.1.3" rel="stylesheet" />
{% endblock %}
{% block body %}

<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form">
			<input type="hidden" name="id" value="{{d.id}}">
			<input id="treeId" name="parent_id" type="hidden" value="{{d.parent_id}}" />
			<div class="ibox-content">
				<div class="nav-tabs-custom">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#c-info" data-toggle="tab" aria-expanded="true">栏目信息</a></li>
						<li><a href="#c-mold" data-toggle="tab" aria-expanded="false">模板信息</a></li>
						<li><a href="#c-seo" data-toggle="tab" aria-expanded="false">SEO信息</a></li>
						<li><a href="#c-role" data-toggle="tab" aria-expanded="false">权限设置</a></li>
					</ul>
					<div class="tab-content">
						<!--栏目信息-->
						<div class="tab-pane active" id="c-info">
							<div class="form-group">
								<label class="col-sm-3 control-label">上级：</label>
								<div class="col-sm-8">
									<div class="input-group">
										<input class="form-control" type="text" onclick="selectTree()" id="treeName"
											readonly="true" value="{{d.parent.title or '无'}}">
										<span class="input-group-addon" onclick="selectTree()"><i
												class="fa fa-search"></i></span>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label is-required">栏目标题：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="title" id="title" value="{{d.title or ''}}"
										required>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label is-required">编码：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="name" id="name" value="{{d.name}}"
										required>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label is-required">排序：</label>
								<div class="col-sm-8">
									<input class="form-control" type="number" name="order_num" id="order_num"
										value="{{d.order_num or 0}}" required>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label is-required">是否可见：</label>
								<div class="col-sm-8">
									{% for dd in get_dict_data('cms_visible')%}
									<div class="radio-box">
										<input type="radio" id="menuName_{{dd.id}}" name="visible" value="{{dd.value}}"
											{{'checked' if d.visible|string==dd.value else '' }} required>
										<label for="menuName_{{dd.id}}">{{dd.label}}</label>
									</div>
									{% endfor %}
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">图标：</label>
								<div class="col-sm-8">
									<input id="icon" name="icon" class="form-control" type="text" placeholder="选择图标"
										value="{{d.icon or ''}}">
									<div class="ms-parent" style="width: 100%;">
										<div class="icon-drop animated flipInX"
											style="display: none;max-height:200px;overflow-y:auto">
											<div>
												{% include 'admin/sys/menu/icon.html'%}
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">图片：</label>
								<div class="col-sm-8">
									<div class="thumbnail">
										<input id="thumbnail" name="img" type="hidden" value="{{d.img}}">
										<img id="thumbnail-img" src="{{d.img or '/static/img/thumbnail.jpg'}}"
											class="img-rounded" style="max-height: 300px;">
										<div class="caption">
											<button id="thumbnail-upload-btn" type="button"
												class="btn btn-outline-secondary btn-sm">选择图片</button>
										</div>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">描述：</label>
								<div class="col-sm-8">
									<textarea id="desp" name="desp" class="tinymce-editor">{{d.desp or ''}}</textarea>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">备注：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="remark" id="remark"
										value="{{d.remark or ''}}">
								</div>
							</div>
						</div>
						<!--模板信息-->
						<div class="tab-pane" id="c-mold">
							<div class="form-group">
								<label class="col-sm-3 control-label is-required">模板类型：</label>
								<div class="col-sm-8">
									<select id="tpl_mold" name="tpl_mold" class="form-control m-b">
										{% for dd in get_dict_data('cms_category_tpl_mold')%}
										<option value="{{dd.value}}" {{'selected' if d.tpl_mold==dd.value else '' }}>
											{{dd.label}}
										</option>
										{% endfor %}
									</select>
								</div>
							</div>
							<div id="tpl_list_div" class="form-group">
								<label class="col-sm-3 control-label ">列表模板：</label>
								<div class="col-sm-8">
									<select id="tpl_list" name="tpl_list" class="form-control m-b">
										{% for t in tpl_list_select %}
										<option value="{{t}}" {{'selected' if t==d.tpl_list}}>{{t}}</option>
										{% endfor %}
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">单页/详情模板：</label>
								<div class="col-sm-8">
									<select id="tpl_page" name="tpl_page" class="form-control m-b">
										{% for t in tpl_single_select %}
										<option value="{{t}}" {{'selected' if t==d.tpl_page}}>{{t}}</option>
										{% endfor %}
									</select>
								</div>
							</div>

							<div id="content_div" class="form-group">
								<label class="col-sm-3 control-label ">单页内容：</label>
								<div class="col-sm-8">
									<textarea id="content" name="content"
										class="tinymce-editor">{{d.content or ''}}</textarea>
								</div>
							</div>
						</div>
						<!--SEO信息-->
						<div class="tab-pane" id="c-seo">
							<div class="form-group">
								<label class="col-sm-3 control-label ">seo标题：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="seo_title" id="seo_title"
										value="{{d.seo_title or ''}}">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">seo描述：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="seo_description" id="seo_description"
										value="{{d.seo_description or ''}}">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label ">seo关键词：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="seo_keywords" id="seo_keywords"
										value="{{d.seo_keywords or ''}}">
								</div>
							</div>
						</div>
						<!--权限设置-->
						<div class="tab-pane" id="c-role">
							<div class="form-group">
								<label class="col-sm-3 control-label ">角色：</label>
								<div class="col-sm-8">
									<select class="form-control" name="h_role" id="h_role">
										<option value="0" {{'selected' if d.h_role==0 else '' }}>无</option>
										<option value="2" {{'selected' if d.h_role==2 else '' }}>会员</option>
										<option value="3" {{'selected' if d.h_role==3 else '' }}>vip</option>
										<option value="4" {{'selected' if d.h_role==4 else '' }}>付费</option>
									</select>
								</div>
							</div>
							<div class="form-group" id="price_div">
								<label class="col-sm-3 control-label ">价格：</label>
								<div class="col-sm-8">
									<div class="input-group m-b">
										<input class="form-control" type="number" name="price"
											value="{{d.price or '0.00'}}">
										<span class="input-group-addon">￥</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</body>
{% endblock %}
{% block js %}
{{ super() }}
<script src="{{url_for('admin.static',filename='ajax/libs/jasny/jasny-bootstrap.min.js')}}?v=3.1.3"></script>
<script src="{{url_for('admin.static',filename='ajax/libs/tinymce/js/tinymce/tinymce.min.js')}}"></script>
<script src="{{url_for('admin.static',filename='js/my_tinymce.js')}}"></script>
<script type="text/javascript">


	$(document).ready(function () {
		let mold = $('#tpl_mold').val()
		if (mold == 'single_page') {
			$('#tpl_list_div').hide();
			$('#content_div').show();
		} else {
			$('#tpl_list_div').show();
			$('#content_div').hide();
		}

		$('#tpl_mold').on('change', function () {
			let mold = $(this).val();
			if (mold == 'list') {
				$('#tpl_list_div').show();
				$('#content_div').hide();
			}
			if (mold == 'single_page') {
				$('#tpl_list_div').hide();
				$('#content_div').show();
			}
		});
	});

	$("#form").validate({

	});

	function submitHandler() {
		if ($.validate.form()) {
			tinyMCE.triggerSave();
			$.operate.save("{{url_for('admin.cms.category.edit')}}", $('#form').serialize());
		}
	}

	/*新增-选择上级*/
	function selectTree() {
		var treeId = $("#treeId").val();
		var menuId = treeId > 0 ? treeId : 1;
		var url = "{{url_for('admin.cms.category.select_tree')}}?id=" + menuId;
		var options = {
			title: '选择',
			width: "380",
			url: url,
			callBack: doSubmit
		};
		$.modal.openOptions(options);
	}

	function doSubmit(index, layero) {
		var body = $.modal.getChildFrame(index);
		$("#treeId").val(body.find('#treeId').val());
		$("#treeName").val(body.find('#treeName').val());
		$.modal.close(index);
	}

	$(function () {
		function h_role_change(role) {
			if (role == '4') {
				$('#price_div').show()
			} else {
				$('#price_div').hide()
			}
		}
		h_role_change($('#h_role').val());

		$("#h_role").change(function () {
			let role = $(this).val()
			h_role_change(role)
		});
	});

	$(function () {
		$("input[name='icon']").focus(function () {
			$(".icon-drop").show();
		});
		$("#form").click(function (event) {
			var obj = event.srcElement || event.target;
			if (!$(obj).is("input[name='icon']")) {
				$(".icon-drop").hide();
			}
		});
		$(".icon-drop").find(".ico-list i").on("click", function () {
			$('#icon').val($(this).attr('class'));
		});
		$('input').on('ifChecked', function (event) {
			var menu_type = $(event.target).val();
			if (menu_type == "M") {
				$("#url").parents(".form-group").hide();
				$("#perms").parents(".form-group").hide();
				$("#icon").parents(".form-group").show();
				$("#target").parents(".form-group").hide();
				$("input[name='visible']").parents(".form-group").show();
				$(".is-refresh").hide();
			} else if (menu_type == "C") {
				$("#url").parents(".form-group").show();
				$("#perms").parents(".form-group").show();
				$("#icon").parents(".form-group").show();
				$("#target").parents(".form-group").show();
				$("input[name='visible']").parents(".form-group").show();
				$(".is-refresh").show();
			} else if (menu_type == "F") {
				$("#url").parents(".form-group").hide();
				$("#perms").parents(".form-group").show();
				$("#icon").parents(".form-group").hide();
				$("#target").parents(".form-group").hide();
				$("input[name='visible']").parents(".form-group").hide();
				$(".is-refresh").hide();
			}
		});
	});

	//上传图片
	$('#thumbnail-upload-btn').click(function (e) {
		imagehosting('thumbnail-img');
	});

	//调用图床
	var imagehosting_for = "thumbnail-img";
	var tinymce_select_img_callback = null;
	function imagehosting(flag) {
		imagehosting_for = flag;
		layer.open({
			type: 2,
			title: '图片管理',
			shade: 0.8,
			maxmin: true,
			shadeClose: true,
			area: ['80%', '90%'],
			content: '{{url_for("admin.cms.material.image_hosting")}}' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
		});
	}
	//image_hosting.html图床界面调用该函数
	function imagehosting_callback(obj) {
		//缩略图
		if (imagehosting_for === 'thumbnail-img') {
			$('#thumbnail-img').attr('src', obj.img_url);
			$('#thumbnail').val(obj.img_url);
		}
		//编辑器 editor.md
		if (imagehosting_for === 'editor-img') {
			tinymce_select_img_callback(obj.img_url, { alt: obj.img_name });
		}

	}
</script>
{% endblock %}